<template>
	<!-- 放置龙弹窗-->
	<u-popup :show="moneyShow" mode="center" @close="close" round="16rpx" bgColor='transparent'
		overlayOpacity='0.85'>
		<view class="popup-one-box flex-col align-center">
			<image class="popup-top-bg" src="/static/images/starmap/popup_top-bg.png" mode=""></image>
			<view class="popup-top-gaoji">
				<image class="gao-ji" src="/static/images/starmap/private_map.png" mode=""></image>
			</view>
			<view class="has-shuijing justify-start">
				放置
				<!-- <text class="shui-ji-num">0</text> 个 -->
			</view>
			<view class="need-kuang justify-start align-center">
				<view class="long-box justify-start align-center">
					<image class="long-box-icon" src="/static/images/starmap/min-long.png" mode="heightFix"></image>
					<view class="">
						<view class="shui-ji-num">
							{{data.idle_dragon_num}}
						</view>
						<view class="need-shuijing">
							闲置中
						</view>
					</view>
				</view>
				<view class="" style="margin-left: 40rpx;">
					<view class="shui-ji-num">
						{{data.mineing_dragon_num}}
					</view>
					<view class="need-shuijing">
						已放置
					</view>
				</view>
				<!-- <view class="">
					<view class="shui-ji-num">
						3
					</view>
					<view class="need-shuijing">
						高级地图
					</view>
				</view> -->
				<!-- <view class="need-shuijing">
					需消耗的钻石
				</view>
				<view class="need-shuijing-num justify-start align-center">
					<image class="popup-kuangshi" src="/static/images/starmap/kuangshi.png" mode=""></image>
					100
				</view> -->
			</view>
			<view class="put-box justify-between align-center">
				<view class="put-num-tip">
					放置数量
				</view>
				<view class="setp justify-center align-center">
					<u-number-box v-model="number" :max='data.idle_dragon_num'>
						<view slot="minus" class="minus">
							<u-icon name="minus" size="12"></u-icon>
						</view>
						<text slot="input" style="width: 40px;text-align: center;color: #FFF;"
							class="input">{{number}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
						</view>
					</u-number-box>
				</view>
				<view class="max-btn justify-center align-center" @tap="number=data.idle_dragon_num">
					最大
				</view>
			</view>
			<view class="popup-box-btn align-center justify-center" @click="putLong">
				确定放置青龙
			</view>
			<view class="popup-box-cancel align-center justify-center" @click="close">
				<image class="close-popup" src="/static/images/starmap/close.svg" mode=""></image>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			isShow:{
				type:Boolean,
				default:false,
			},
			data:{
				type:Object,
				default:{},
			}
		},
		data(){
			return {
				number:1,
				moneyShow:false,
			}
		},
		watch:{
			isShow(val){
				console.log(val,'modal');
				this.moneyShow = val
				if(val){
				}
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			async putLong(){
				let url = '/api/v1/mine_add_dragon'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					number: this.number
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.$emit('update')
					this.close()
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			}
		}
	}
</script>

<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	// 放置青龙样式
	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: linear-gradient(181deg, rgba(35, 52, 73, .94) 20%, #181922 100%);
		padding: 90rpx 40rpx 40rpx;
	
		.has-shuijing {
			width: 100%;
			// height: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF99;
			margin-bottom: 30rpx;
		}
	
		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
			text-align: left;
			margin-bottom: 16rpx;
		}
	
		.popup-box-btn {
			width: 480rpx;
			height: 90rpx;
			background: #0BFF8D;
			color: #000E00;
			font-size: 30rpx;
			border-radius: 8rpx;
			font-weight: bold;
		}
	
		.popup-box-cancel {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -120rpx;
		}
	
		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}
	
		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}
	
		.need-kuang {
			width: 480rpx;
			height: 120rpx;
			background: rgba(46, 70, 86, .41);
			border-radius: 8rpx;
			padding: 0 20rpx;
			margin-bottom: 40rpx;
			.long-box-icon{
				width: 54rpx;
				height: 66rpx;
				margin-right: 30rpx;
			}
	
			.need-shuijing {
				font-size: 22rpx;
				color: #FFFFFF99;
			}
	
			.need-shuijing-num {
				font-size: 33rpx;
				font-weight: 700;
				color: #FFF;
			}
		}
	
		.popup-top-bg {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			right: 0;
			z-index: -1;
			height: 108rpx;
		}
	
		.popup-top-gaoji {
			position: absolute;
			top: 40rpx;
			right: 30rpx;
	
			.gao-ji {
				width: 156rpx;
				height: 35rpx;
			}
		}
		.put-box{
			width: 100%;
			margin-bottom: 50rpx;
		}
		.max-btn {
			margin-left: .5rem;
			width: 4.25rem;
			line-height: 2rem;
			border-radius: 100px;
			background-color: #273A49;
			text-align: center;
			color: #fff;
			font-size: 1rem;
		}
	.setp {
		width: 5.625rem;
		height: 2rem;
		background-color: #273A49;
		border-radius: 120px;
	}
	.put-num-tip{
		font-size: 25rpx;
		font-family: SourceHanSansSC, SourceHanSansSC;
		font-weight: 400;
		color: #FFFFFF;
	}
	}
	.minus {
		width: 22px;
		height: 22px;
		@include flex;
		justify-content: center;
		align-items: center;
	}
	
	.input {
		padding: 0 10px;
	}
	
	.plus {
		width: 22px;
		height: 22px;
		// background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>